<template>
  <div class="page">
    <el-table
      :data="tableData"
      stripe
      v-loading="loading"
      :header-cell-style="{ 'background-color': 'rgba(254,90,19,0.05)' }"
      style="width: 100%"
    >
      <el-table-column prop="demandTitle" label="名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="施工地点" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area
          }}{{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column prop="entryTime" label="进场时间" align="center">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleDetail(scope.row)" type="text"
            >查看</el-button
          >
          <el-button @click.native.prevent="handleEdit(scope.row)" type="text"
            >编辑</el-button
          >
          <el-button
            @click.native.prevent="deleteRow(scope.row)"
            type="text"
            style="color: red"
            >删除</el-button
          >
          <el-button
            @click.native.prevent="handleUnmount(scope.row)"
            type="text"
            style="color: #3a71fb"
            >{{scope.row.status == 1 ? '下架' : '上架'}}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { demandHall, deleteDemand, changeStatus } from "@/api/demand";
export default {
  name: "demandList",
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        isMine: 1,
      },
      tableData: [],
      loading: true,
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      demandHall(this.queryParams).then((res) => {
        this.tableData = res.result.records;
        this.total = res.result.total;
        this.loading = false;
      });
    },
    handleDetail(row) {
      this.$router.push("/mineDmandDetail/" + row.id);
    },
    handleEdit(row){
      this.$router.push("/demandEdit/" + row.id);
    },
    deleteRow(row) {
      this.$modal
        .confirm("确定删除该需求？")
        .then((res) => {
          if(res === 'confirm'){
            deleteDemand({id: row.id}).then(res => {
              this.$modal.msgSuccess("删除成功");
              this.getList()
            })
          }
        })
        .catch((err) => {});
    },
    handleUnmount(row){
      changeStatus({id: row.id, status: row.status == 1 ? 2 : 1}).then(res => {
        this.$modal.msgSuccess("操作成功");
        this.getList()
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  margin: auto;
  background: #f7f7f7;
}

::v-deep .el-table thead {
  font-weight: normal;
  font-size: 14px;
  color: #000000;
}

::v-deep .pagination-container {
  width: 100%;
  padding: 50px 20px;
  box-sizing: border-box;
  background: #fff;
}
</style>
